<template lang="html">
  <el-table v-bind:data="movies">
    <el-table-column label="电影名称">
      <template v-slot="scope">
        <router-link :to="{ path: '/movie-detail', query: { id: scope.row.id } }">
          {{ scope.row.movieName }}
        </router-link>
      </template>
    </el-table-column>
    <el-table-column prop="movieTime" label="上映时间">
    </el-table-column>
    <el-table-column v-slot="scope" label="下载链接">
      <el-button style="display:inline" type="primary" icon="el-icon-download"
                 @click="movieDownload(scope.row._id, scope.row.movieName)">下载
      </el-button>

      <el-alert type='error' style="display:inline;margin-left: 10px;" v-if = 'scope.row.downloadResult'
                title='下载失败,请稍后重试' v-bind:description='scope.row.errorMessage' show-icon>
      </el-alert>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      movies: []
    }
  },
  methods: {
    async movieDownload(movieId, movieName) {
      try {
        var url = 'http://localhost:3000/movie/download/' + movieId; // 替换为你的URL
        const response = await fetch(url);
        if (!response.ok) {
          this.movies.forEach(
              (movie) => {
                if (movie.movie_id === movieId) {
                  movie.downloadResult = true;
                  movie.errormessage = 'download file failed' + response.status;
                }
              }
          )
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        let downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = movieName;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        setTimeout(() => {
          window.URL.revokeObjectURL(blobUrl);
          document.body.removeChild(downloadLink);
        }, 0);
      } catch (error) {
        this.movies.forEach(
            (movie) => {
              if (movie.movie_id === movieId) {
                movie.downloadResult = true;
                movie.errormessage = 'download file failed' + error;
              }
            }
        )
        console.log('download file failed', error);
      }
    }
  },
  watch: {
    movies: {
      handler(newVal, oldVal) {
        console.log('new:' + newVal + 'oldVal' + oldVal);
      },
      deep: true
    }
  },
  created() {
    this.$http.get("http://localhost:3000/showRanking")
        .then((res) => {
          this.movies = res.data.data.slice(0, 10);
          console.log(this.movies);
        })
        .then((movies) => {
          for (var movie in movies) {
            movie.movieTimeShow = new Date(parseInt(movie.movieTime)).toLocaleString().replace(/:\d{1,2}$/, ' ');
          }
        })
        .catch(err => {
          console.log(err);
        })
  }
}
</script>
<style lang="css" scoped>
.movieList {
  padding: 5px;
  border-bottom: 1px dashed #ababab;
}
</style>